<template>
	<div>
		<van-cell title="商品清单" value="添加商品" is-link @click="change_show_" class="cell_header_title" />
		<van-popup v-model="show_" style="height: 100%; " position="top">
			<div class="wrapper" @click.stop>

				<van-cell :value="title" class="cell_header_title" />

				<van-field v-model="fieldValue" is-link readonly label="选择类别" placeholder="请选择商品所在类别"
					@click="show = true" />

				<van-popup v-model="show" round position="bottom">
					<van-cascader v-model="cascaderValue" title="请选择商品类别" :options="options" @close="show = false"
						@finish="onFinish" @change="onChange" />
				</van-popup>

				<!-- 列表 -->

				<van-row>


					<van-col span="6">

						<van-sidebar v-model="activeKey" style="width: 100%; color: red;">
							<van-sidebar-item v-for="item in spu_search_list" :title="item.spu_name"
								@click='get_sku_list(item.id)' />
						</van-sidebar>

						<van-sidebar v-if="spu_search_list.length ==0" v-model="activeKey" style="width: 100%;">
							<van-sidebar-item v-for="item in spu_list" :title="item.spu_name"
								@click='get_sku_list(item.id)' />
						</van-sidebar>

						<div style="height: 120px;"></div>


					</van-col>



					<van-col span="18">

						<van-empty v-if="this.sku_list.length==0" description="没有对应的SKU" />

						<van-card v-else v-for="item in sku_list" :tag="item.have_chosen?'选择':''"
							:num="item.selected_quantity?item.selected_quantity:null" :desc="item.attribute_str"
							:title="item.brand_name + item.spu_name" :price="item.price"
							thumb="https://img01.yzcdn.cn/vant/ipad.jpeg" @click="popSku(item)">

							<template #tags>
								<van-tag v-show="item.location_name" plain type="danger">货位:{{item.location_name}}
								</van-tag>
								<!-- <van-tag plain type="danger">标签</van-tag> -->
							</template>

						</van-card>

					</van-col>
				</van-row>
			</div>

			<!-- 底部按钮 -->
			<div style="display: flex; justify-content:center; position: fixed;bottom: 0;width: 100%;">

				<van-button style="width: 50%;" type="info" @click="sku_search_show=true">查询SKU</van-button>

				<van-button style="width: 50%;" type="primary" @click="exit_add_goods">点击退出选择</van-button>
			</div>


			<!-- select_sku -->


			<van-popup v-model="sku_search_show" position="top" :style="{ height: '30%' }">


				<van-field v-model="search_key" center clearable label="SKU查询" placeholder="SPU连续关键字,对应的商标,属性">
					<template #button>
						<van-button size="small" type="primary" @click="sku_search()">点击查询</van-button>
					</template>
				</van-field>




			</van-popup>








			<!-- spu查询栏 -->
			<div v-if="this.spu_list.length!=0" class="spu_search" @click="spu_search_show=true">

				<svg t="1618452523749" class="icon" viewBox="0 0 1024 1024" version="1.1"
					xmlns="http://www.w3.org/2000/svg" p-id="9403" width="46" height="46">
					<path
						d="M479 336.3c-78.8 0-143 64.1-143 143 0 78.8 64.1 143 143 143 78.8 0 143-64.1 143-143-0.1-78.9-64.2-143-143-143z"
						p-id="9404" fill="#2c2c2c"></path>
					<path
						d="M512 0C229.2 0 0 229.2 0 512s229.2 512 512 512 512-229.2 512-512S794.8 0 512 0z m237.5 749.2c-7 7-16.2 10.5-25.5 10.5s-18.4-3.5-25.5-10.5l-94.9-94.9c-36.2 25.9-79.4 39.8-124.7 39.8-57.4 0-111.4-22.4-152-63s-63-94.6-63-152 22.4-111.4 63-152 94.6-63 152-63c57.4 0 111.4 22.4 152 63s63 94.6 63 152c0 45.1-13.8 88.1-39.4 124.1l94.9 94.9c14.1 14.2 14.1 37 0.1 51.1z"
						p-id="9405" fill="#2c2c2c"></path>
				</svg>

			</div>


			<van-popup v-model="spu_search_show" position="top" :style="{ height: '30%' }">


				<van-field v-model="search_key" center clearable label="SPU查询" placeholder="SPU包含的连续关键字">
					<template #button>
						<van-button size="small" type="primary" @click="spu_search()">点击查询</van-button>
					</template>
				</van-field>

			</van-popup>
		</van-popup>





		<!-- sku弹窗 -->
		<van-popup v-model="show_pop_sku" position="bottom" :style="{ height: '70%' }">

			<div class="popupSku">

				<div style="font-weight: 800; margin: 5px;">SPU名称：{{sku_info.spu_name}},SKUID:{{sku_info.id}}</div>


				<van-row>
					<van-col span="8">
						<van-image style="" src="https://img01.yzcdn.cn/vant/ipad.jpeg" width="5rem" height="5rem"
							fit="contain">
							<template v-slot:error>加载失败</template>
						</van-image>

					</van-col>
					<van-col span="16">
						<div style="margin-top: 5px;">品牌：{{sku_info.brand_name}}</div>
						<div style="margin-top: 5px;"> 单位：{{sku_info.unit_name}}</div>
						<div style="margin-top: 5px;"> 已选择：{{sku_info.selected_quantity}}</div>

					</van-col>
				</van-row>

				<div style="width: 200px; margin-left: 20px;">

					当前库存总量：{{sku_quantity}}

					<div v-for="item in sku_location_detail">



						{{item.location_name}} 数量 ：{{item.sum}}

					</div>

				</div>



				<!-- 货位选择 -->
				<van-cell title="选择货位" :value="now_location" @click='show_location_func' />

				<van-popup v-model="show_location" position="bottom">
					<van-picker title="库位列表" show-toolbar :columns="warehouse_location" @confirm="onConfirmLocation"
						@cancel="onCancelLocation" @change="onChangeLocation" />
				</van-popup>

				<!-- 当前产品所在位置 -->

				<div>

				</div>



				<div style="margin: 10px;">
					<div style="font-weight: 600;">属性：</div>
					<div v-for="attribute in sku_info.attribute" style="margin: 8px ;width: 160px;">
						{{attribute.attribute_key}} : {{attribute.attribute_value}}
					</div>

				</div>




				<!-- 允许输入数字，调起带符号的纯数字键盘 -->
				<van-field v-model="now_price" type="number" label="单价 (可选)" />




				<!-- 数量选择 -->
				<div style="float:right; width: 100px; margin-right: 20px;">

					选择数量：
					<van-stepper v-model="value" integer />

				</div>

				<div style="height: 130px;"></div>


				<div style="display: flex; justify-content:center; position: fixed;bottom: 0;width: 100%;">
					<van-button v-if="sku_info.have_chosen" style="width: 50%;" type="danger"
						@click="delete_have_chosen">删除</van-button>
					<van-button v-else disabled style="width: 50%;" type="danger">删除</van-button>
					<!-- <van-button style="width: 33%;" type="warning">信息按钮</van-button> -->
					<van-button style="width: 50%;" type="primary" @click="addGoods">确认</van-button>
				</div>

			</div>

		</van-popup>

		<!-- spu搜索 -->





	</div>
</template>

<script>
	import select_all_sku from '../../utils/select_all_sku.js'
	import select_sku_attribute from '../../utils/select_sku_attribute.js'
	import get_all_ancestor from "../../utils/select_all_ancestor.js"
	import {
		Toast
	} from 'vant'

	import {
		select_all_ancestor_url,
		select_class_son_url,
		select_all_spu_by_class_id_url,
		select_all_sku_url,
		select_sku_attribute_url,
		select_warehouse_location_url,
		select_sku_in_where_location_url

	} from "../../utils/setting.js"
	export default {
		name: '',
		components: {},
		props: [
			'warehouseId'
		],
		data() {
			return {
				title: '商品列表',
				show_sku: false,
				show_pop_sku: false,
				show_location: false,
				show_: false,
				show: false,
				spu_search_show: false,
				sku_search_show: false,
				ancestor_list: [],
				fieldValue: '',
				cascaderValue: '',
				options: [],
				activeKey: 0,
				class_id: '',
				spu_list: [],
				spu_search_list: [],
				search_key: '',
				spu_id: '',
				sku_list: [],
				all_sku_list: [],
				sku_info: {},
				value: 1,
				shopping_cart: [],
				warehouse_location: [],
				warehouse_location_: null,
				now_location: '点击选择货位',
				now_location_id: null,
				now_price: null,

				sku_location_detail: [],
				sku_quantity: '',

			}
		},
		methods: {

			sku_search() {
				// console.log(this.all_sku_list)

				let res = this.all_sku_list
				// console.log(res)
				this.sku_list = []

				for (let i = 0; i < res.length; i++) {
					if (res[i].value.indexOf(this.search_key) != -1) {

						select_sku_attribute(

							res[i].id,

							(result) => {
								// console.log(result)
								res[i].attribute = result
								res[i].attribute_str = result.attribute_str

							}
						)

						this.sku_list.push(res[i])
					}
				}


			},

			spu_search() {


				this.spu_search_list = []


				for (let i = 0; i < this.spu_list.length; i++) {
					let val = this.spu_list[i]
					// console.log(val)
					if (val.spu_name.toLowerCase().indexOf(this.search_key.toLowerCase()) != -1) {
						// console.log(val.spu_name.indexOf(this.search_key))

						this.spu_search_list.push(val)
					}

				}

				this.spu_search_show = false
				this.title = "搜索关键字：" + this.search_key + ''

				// console.log(this.spu_search_list)
			},

			// 全部选项选择完毕后，会触发 finish 事件
			onFinish({
				selectedOptions
			}) {

				this.title = '商品列表'
				this.spu_search_list = []
				this.class_id = selectedOptions[1].value
				this.show = false;
				this.fieldValue = selectedOptions.map((option) => option.text).join('/');
				this.get_class_spu(this.class_id)
			},

			onChange({
				value
			}) {
				for (let i = 0; i < this.options.length; i++) {
					if (this.options[i].value == value) {
						// this.options[i].children=[]
						this.get_class_son(value, i)
					}
				}
				this.sku_list = []

			},


			change_show_() {

				if (this.warehouseId == null) {
					Toast('请选择库房后在进行产品选择');

				} else {
					this.show_ = true
				}

			},

			//货位选择器
			onConfirmLocation(value, index) {
				Toast(`当前值：${value}, 当前索引：${index}`);
				this.now_location_id = this.warehouse_location_[index]['id']
				this.now_location = this.warehouse_location_[index]['location_name']
				this.show_location = false
			},
			onChangeLocation(picker, value, index) {
				Toast(`当前值：${value}, 当前索引：${index}`);
				this.now_location_id = this.warehouse_location_[index]['id']
				this.now_location = this.warehouse_location_[index]['location_name']

			},
			onCancelLocation() {
				Toast('取消');
				this.show_location = false
			},

			show_location_func() {



				this.get_warehouse_location(this.warehouseId)




				this.show_location = true

			},




			exit_add_goods() {

				this.shopping_cart = []
				for (let i = 0; i < this.all_sku_list.length; i++) {
					let val = this.all_sku_list[i]
					if (val.have_chosen == true) {
						this.shopping_cart.push(val)
					}
				}

				this.$emit('listenToExitAddGoodsEvent', this.shopping_cart)

				this.show_ = false

			},
			//购物车添加商品
			addGoods() {


				if (this.now_location == '点击选择货位') {

					Toast('请选择货位')

					return
				}


				this.sku_info['have_chosen'] = true
				this.sku_info['selected_quantity'] = this.value
				this.sku_info['location_id'] = this.now_location_id
				this.sku_info['location_name'] = this.now_location
				this.sku_info['price'] = this.now_price
				Toast.success('添加成功');
				this.show_pop_sku = false


			},
			//购物车删除商品
			delete_have_chosen() {

				this.sku_info['have_chosen'] = false
				delete this.sku_info.selected_quantity
				this.show_pop_sku = false
				Toast.success('删除成功');
			},


			//popSku

			popSku(info) {

				// console.log('这里是popsku')
				// console.log(info)
				this.show_pop_sku = true
				this.sku_info = info
				this.now_location = '点击选择货位'
				this.now_location_id = null
				this.now_price = null

				let sku_id = info.id

				// console.log(sku_id)
				this.$axios({
					method: 'GET',
					url: select_sku_in_where_location_url,
					params: {
						warehouse_id: this.warehouseId,
						sku_id: sku_id
					}

				}).then((response) => { //这里使用了ES6的语法
					// console.log(response) //请求成功返回的数据
					this.sku_location_detail = response.data.resultBody.detail.reverse()
					console.log(this.sku_location_detail)
					this.sku_quantity = response.data.resultBody.sku_in_warehouse_sum
				}).catch((error) => {
					console.log(error) //请求失败返回的数据
					this.$message({
						message: '请联系管理员' + '!!!',
						type: 'error'
					})
				})



			},


			//拼接属性变成说明文字
			joint_attribute(val) {

				if (val.length == 0) {
					return '没有属性,请尽快添加'
				}

				let res = ''

				for (let i = 0; i < val.length; i++) {
					res = res + val[i].attribute_key + ':' + val[i].attribute_value

					if (i != val.length - 1) {
						res = res + ', '
					}
				}

				return res

			},

			//获得指定spu_id的sku及其属性
			get_sku_list(spu_id) {

				// console.log(this.all_sku_list)

				this.sku_list = []

				for (let i = 0; i < this.all_sku_list.length; i++) {
					let val = this.all_sku_list[i]

					if (val['spu_id'] == spu_id) {
						// console.log(val)
						let sku_id = val['id']

						//获取属性
						this.$axios({
							method: 'GET',
							url: select_sku_attribute_url,
							params: {
								sku_id: sku_id
							}
						}).then((response) => { //这里使用了ES6的语法
							// console.log(response) //请求成功返回的数据
							let result = response.data.resultBody.reverse()
							// console.log(result)
							//添加属性
							val['attribute'] = result
							//添加属性拼接的字符串
							val['attribute_str'] = this.joint_attribute(result)

							// val['have_chosen'] = true
							// val['num'] = 1

							this.sku_list.push(val)

							// console.log(this.sku_list)

							// console.log(this.all_sku_list)

						}).catch((error) => {
							// console.log(error) //请求失败返回的数据
							this.$message({
								message: '请联系管理员' + '!!!',
								type: 'error'
							})
						})


					}

				}

				console.log(this.sku_list)

			},

			//获取所有sku
			get_all_sku_list() {
				
				
				select_all_sku(
					(res)=>{
						this.all_sku_list = res
					}
				)

			},

			//获得指定class_id的spu
			get_class_spu(class_id) {

				this.$axios({
					method: 'GET',
					url: select_all_spu_by_class_id_url,
					params: {
						class_id: class_id
					}
				}).then((response) => { //这里使用了ES6的语法
					// console.log(response) //请求成功返回的数据
					this.spu_list = response.data.resultBody.reverse()
					this.spu_id = this.spu_list[0].id

					this.sku_list = []
					this.get_sku_list(this.spu_list[0].id)


					// console.log(this.ancestor_list)
				}).catch((error) => {
					// console.log(error) //请求失败返回的数据
					this.$message({
						message: '请联系管理员' + '!!!',
						type: 'error'
					})
				})

			},

			//获得指定sku_id的属性
			get_sku_attribute(sku_id) {

				this.$axios({
					method: 'GET',
					url: select_sku_attribute_url,
					params: {
						sku_id: sku_id
					}
				}).then((response) => { //这里使用了ES6的语法
					// console.log(response) //请求成功返回的数据
					let result = response.data.resultBody.reverse()
					// console.log(result)

				}).catch((error) => {
					// console.log(error) //请求失败返回的数据
					this.$message({
						message: '请联系管理员' + '!!!',
						type: 'error'
					})
				})

			},

			//所有一级分类
			get_all_ancestor_call_back(res) {

				
					this.ancestor_list = res

					for (let i = 0; i < this.ancestor_list.length; i++) {
						this.options.push({
								text: this.ancestor_list[i]['class_name'],
								value: this.ancestor_list[i]['id'],
								children: []

							}

						)
					}

			

			},

			//一级分类的子分类
			get_class_son(class_id, index) {

				// let children_list = []

				this.options[index].children = []

				this.$axios({
					method: 'GET',
					url: select_class_son_url,
					params: {
						class_name: class_id
					}
				}).then((response) => { //这里使用了ES6的语法
					// console.log(response) //请求成功返回的数据
					let result = response.data.resultBody.reverse()
					// console.log(result)
					for (let i = 0; i < result.length; i++) {
						this.options[index].children.push(

							{
								text: result[i].class_name,
								value: result[i].id
							}
						)

					}

					// this.options[index].ch
					// console.log(this.options[index].children)

				}).catch((error) => {
					// console.log(error) //请求失败返回的数据
					this.$message({
						message: '请联系管理员--' + '!!!',
						type: 'error'
					})
				})

			},

			//获取指定库房的所有货位 select_warehouse_location

			get_warehouse_location(warehouse_id) {

				console.log(warehouse_id)
				this.$axios({
					method: 'GET',
					url: select_warehouse_location_url,
					params: {
						warehouse_id: warehouse_id
					}
				}).then((response) => { //这里使用了ES6的语法
					// console.log(response) //请求成功返回的数据

					this.warehouse_location = []
					let result = response.data.resultBody.reverse()
					// console.log(result)
					this.warehouse_location_ = result

					for (let i = 0; i < result.length; i++) {
						this.warehouse_location.push(result[i].location_name)
					}
					// this.warehouse_location_ = result


				}).catch((error) => {
					console.log(error) //请求失败返回的数据
					this.$message({
						message: '请联系管理员--' + '!!!',
						type: 'error'
					})
				})

			}




		},
		computed: {},
		watch: {},
		created() {},
		mounted() {
			get_all_ancestor(this.get_all_ancestor_call_back)
			this.get_all_sku_list()
			// this.get_warehouse_location(this.warehouseId)
		},
	}
</script>

<style scoped lang="less">
	.cell_header_title {
		background-color: #F0F0F0;
		font-weight: 800;
	}

	.wrapper {
		// display: flex;
		// align-items: center;
		// justify-content: center;
		// height: 100%;
	}

	.block {
		width: 120px;
		height: 120px;
		background-color: #fff;
	}

	.cell_header_title {
		background-color: #F0F0F0;
		font-weight: 800;
	}

	.van-sidebar {
		// width: 200px;
		// display: block;
		// list-style-type: none;
		// margin: 0;
		// padding: 0;
		// width: 25%;
		// background-color: #f1f1f1;
		// position: fixed;
		// height: 300px;
		// overflow-y: auto;

		// overflow-y: auto;
		// overflow: scroll;
		// // height: 276px;
		// height: 100%;
		// -webkit-overflow-scrolling: touch;

	}

	.spu_search {

		position: fixed;

		right: 0;
		bottom: 100px;

	}

	.divContainer {
		// overflow: auto;
		overflow: scroll;
		// height: 300px;
		height: 550px;
	}

	.divContainer::-webkit-scrollbar {
		border-width: 10px;
	}
</style>
